<!-- eslint-disable vue/valid-v-for -->
<template>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column v-if="index" type="index" width="50" />
      <el-table-column v-if="checkbox" type="selection" width="55" />
      <template v-for="item in column">
        <!-- 判断文本类 -->
        <el-table-column v-if="item.type == 'function'"  :prop="item.prop" :label="item.label" >
          <template  #default="scope">
            <div v-html="item.callback && item.callback(scope.row)"></div>
          </template>
        </el-table-column>
        <!-- 判断按钮类 -->
        <el-table-column v-else-if="item.type == 'solt'"  :prop="item.prop" :label="item.label" >
          <template #default="scope">
            <slot :name="item.slot_name" :data="scope.row"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else :key="item.prop" :prop="item.prop" :label="item.label"  />
      </template>
    </el-table>
  </template>
  
  <script setup lang="ts">
  import { onMounted, defineEmits,defineProps } from 'vue'
  const emit = defineEmits(['onload','updateList'])
  
  const props = defineProps({
    tableData:{
      type:Array,
      default:() => []
    },
    column:{
      type:Array,
      default:() => []
    },
    checkList:{
      type:Array,
      default:() => []
    },
    checkbox:Boolean,
    index:Boolean,
    onLoad:Boolean,
  })
  onMounted(() => {
    api()
  })
  const handleSelectionChange = (value) => {
    emit('updateList',value)
  }
  const api = () => {
    // 请求数据成功后抛出
    props.onLoad && emit('onload','后台数据')
  }
 
  </script>
  
  